<template>
  <div class="onlineUpdate">
    <!-- 在线图片,添加链接 -->
    <ul class="addressList">
      <li>
        <input type="text" id="addr1" class="address" placeholder="请输入图片地址" v-model="address.addr1">
      </li>
    </ul>
    <div class="uploadFooter">
      <button class="btn primary" @click.prevent.stop="insertImage()">确定</button>
    </div>
  </div>
</template>
<script>
import mixin from '../../mixins/index'
export default {
  name: 'onlineImage',
  mixins: [mixin],
  props:['currentSelection','range'],
  data() {
    return {
      address: {
          addr1:'',
      },
      imgWidth: 0,
      imgHeight:0,
    };
  },
  methods: {
    handleClose(){
        this.$parent.show = false;
    },
    async insertImage() {
        let _this = this;
        var innerDom = this.range.extractContents();
        this.restoreRange(this.currentSelection);    
        for (var key in this.address) {
            var rs = this.checkURL(this.address[key]);
            if(rs){
                // 后期加上判断图片地址是否正确的正则
                // this.execCommand("insertImage", this.address[key]);
                 var img = document.createElement("img");
                  img.className = 'inertImage'
                  img.src =  this.address[key];
                  img.style.width = "100%";
                  img.style.height = this.imgHeight==0?'auto':this.imgHeight+'px';
                  img.appendChild(innerDom);
                  this.range.insertNode(img);
                  // this.adjustList('.inertImage');
                  this.handleClose();
                  _this.$parent.selectMenu()
                  console.log(img.parentElement);
            }else{
                alert(key+"图片地址不正确");
            }
        }
    },
    checkURL(url) {
      var reg = /\.(png|jpg|gif|jpeg)$/;
      return reg.test(url)
    }
  },
  watch: {
    
  }
};
</script>
<style scoped>
.onlineUpdate {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 上传图片地址 */
.onlineUpdate ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing:border-box;
  
}
.onlineUpdate ul li {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.address {
  width: 90%;
  height: 30px;
  border: none;
  border-bottom: 1px solid lightgray;
  font-size: 12px;
  outline: none;
}
.uploadFooter {
  width: 100%;
  text-align: center;
  padding: 10px;
}
</style>
